Using Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized -- size, color, drop shadow, and anything that can be done with the power of CSS. Plus: Font Awesome won't trip up screen readers, unlike other icon fonts.

Basic Usage

<i class="fa fa-camera-retro"></i> fa-camera-retro

Detailed example

Let's add a label containing a Font Awesome icon to a Moodle course.

To edit a course section you always have to turn editing on first. Now you can add resources via the "Add an activity or resource" link. Here, choose "label".

Let's say you want to add some kind of general informations about your course which your users should read before they begin. To make sure that these informations will not be missed, you want to mark them with an icon.

First, we start with the text for the new label. For those who are not familiar with HTML, it is a good idea to use a placeholder for the icon:

You can now format the text, for example use a heading format to increase the font-size.
Note: If you change the font-size of the icon's container (here the paragraph where you place the icon), the icon will get bigger, too. Same thing goes for color.

Now go to the Font Awesome project page to choose an icon.

For this example, we choose the "check-circle" icon (left-click).

Now copy the code for that icon.

Back in Moodle, switch the edtor to HTML/code view (see also: https://docs.moodle.org/27/en/Text_editor#Atto_HTML_editor).

Look for your placeholder text "ICON" and replace it with the HTML for the icon.

Close the HTML/code view. In the preview of the editor you should now see the Font Awesome icon.

Learn more about Font Awesome

Troubleshooting

General Recommendation: Using the Atto editor

If you are working with a Moodle version prior to 2.7 or if you are using the TinyMCE as your default editor in Moodle 2.7 or 2.8, there will be certain cases in which the editor deletes all <i> tags on saving (see also: https://moodle.org/mod/forum/discuss.php?d=240159).

So if your are working with Moodle version 2.5 or 2.6, I recommend installing the Atto editor. Atto is a javascript text editor built specifically for Moodle and it is the default text editor in Moodle from 2.7 onwards.

Download Atto text editor for Moodle 2.5 or Moodle 2.6

If you are using a Moodle version 2.7 or higher, make sure the Atto editor is your default editor. Text editors can be enabled, disabled or a different one set to default from "Administration" > "Site administration" > "Plugins" > "Text editors" > "Manage editors".

The Font Awesome icons don't show up at all!

Font Awesome icons are used throughout the theme. Especially, each Moodle block should have an icon to the top left:

If the icons show up here and you have problems that new icons you have included in the HTML by using the text editor, please read the "General Recommendation" right above.

If the icons don't show up even at the blocks, try the following steps:

First of all, try to deactivate the designer mode. Theme designer mode may be deactivated via "Administration" > "Appearance" > "Themes" > "Theme settings".

If the problem with the icons persist, you can use an optional way to load the icon font. Please try the following steps:

As an administrator go to "Site administration" > "Appearance" > "Additional HTML". In the text field "Within HEAD" add this line:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">

On the font Awesome project page, they present some new icons which I can't use

The icon font is included in your download of Theme Lambda. This has the advantage that the icon font is already embedded without any further settings and that it can also be displayed in testing environments without an internet connection.

But if a new version of Font Awesome is released, you won't be able to use the latest icons which were added to the new version. In this case, you can use an optional way to load the icon font to your Moodle site. Please visit the Font Awesome project site at
http://fontawesome.io/get-started/

You will have to enter your email address...

... and after that you will get a single code line.

As an administrator go to "Site administration" > "Appearance" > "Additional HTML". In the text field "Within HEAD" insert the provided code line.